import {
    textIndent,
    templateBox,
    tagContent,
    returnCustomContent,
    appCode,
    importReact,
    scriptBox,
    returnAttr,
    returnTagContent,
    returnVAttr,
    vfnBox,
    fnBox,
    addEvtLis,
    addVEvtLis,
    userState,
    useEffect,
    returnFn,
    formsState,
    removeEvtLis
} from "../../../static/utils/codeHTML.js"
export const data = {
    key: "user-selector",
    title: "User-Selector",
    titleText: ["Can be used in forms such as bullet boxes, drop-down lists, etc. to select users。"],
    CODEList: [
        {
            title: 'Basic Usage',//标题
            introduction: "Click on the Input box in the form to bring up a user selection pop-up。",//简介
            attention: "Select is the event triggered by clicking the confirm button after selecting the user, and val.detail is the array of information for the currently selected user。",//用法提示
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    title: "Selection box",
                    url: '1.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
                {
                    url: '2.png',
                    width: "100px",
                    height: "100px",
                    isOpen: true
                }
            ],
            btnList: [],
            vueHTML: `
                ${templateBox(tagContent("user-selector", `
                    <span class=code-attr-name>:values</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>users</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"userRef"</span>
                    <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>placeholder</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>请选择...</span><span class=code-punctuation>"</span>`))}
                <br />
                ${scriptBox(
                "users:[]",
                addVEvtLis('userRef', 'select', 'userSelect'),
                vfnBox('userSelect', `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    val.detail.${returnVAttr("map", `item.id`)}
                    <br />
                    <span class=code-this>this</span>.users
                    =
                    ids
                    `, 'val')
            )}
            `,
            vueCode: `
                <template>
                    <user-selector :values="users" ref="userRef" titles="用户选择" placeholder="请选择..."></user-selector>
                </template>
                <script>
                export default {
                    data() {
                        return {
                            users: []
                        }
                    },
                    mounted() {
                        this.$refs.userRef.addEventListener('select', this.userSelect.bind(this))
                    },
                    methods: {
                        userSelect(val) {
                            const ids = val.detail.map(item => item.id)
                            this.users = ids
                        }
                    }
                }
                </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    userRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('users', 'setUsers', '&lt;string[]', '[]'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    userRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${addEvtLis('userRef', 'select', 'userSelect')}
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                ${returnFn(`
                ${textIndent(`
                        ${removeEvtLis('userRef', 'select', 'userSelect')}
                    `)
                    }
                `)}
                `)))}
                ${textIndent(fnBox("userSelect", "val", `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    val.detail.${returnAttr("map", `item.id`)}
                    <br />
                    <span class=code-keyword>setUsers</span><span class=code-punctuation>(</span>ids<span class=code-punctuation>)</span>
                `))}
                ${textIndent(
                        returnTagContent("user-selector", `
                        <span class=code-attr-name>values</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>users</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>userRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>placeholder</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>请选择...</span><span class=code-punctuation>"</span>`)
                    )}
                <span class=code-punctuation>};</span>
            `,//代码展示的HTML
            reactCode: `
                import { FC,useRef,useEffect,useState } from 'react';
                const App: FC = () => {
                    const userRef = useRef<any>()
                    const [ users, setUsers ] = useState<string[]>([])
                    useEffect(() => {
                        if ( userRef.current ) {
                            userRef.current?.addEventListener('select', userSelect)
                        }
                        return () => {
                            userRef.current?.removeEventListener('select', userSelect)
                        };
                    });
                    function userSelect(val:any) {
                        const ids = val.detail.map((item:any) => item.id)
                        setUsers(ids)
                    }
                    return <user-selector values={users} ref={userRef} titles="用户选择" placeholder="请选择..." ></user-selector>
                };
            `,//复制的代码
        },
        {
            title: 'Manually control the bullet box',
            introduction: "Pass in the open manual control popup, commonly used for button clicking。",
            attention: "Attention: When manually controlling the pop-up box, whether it is closed or selected, userOpen needs to be set to false, otherwise the pop-up box cannot be opened next time because the status of userOpen is monitored internally。",//用法提示
            imgs: [
                {
                    title: "press-button control",
                    url: '3.png',
                    width: "",
                    height: "",
                    isOpen: false
                }
            ],
            btnList: [],
            vueHTML: `
                ${templateBox(
                `
                    <span class=code-tag>&lt;div></span>
                    ${textIndent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>@click</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-keyword>userOpen</span><span class=code-def>=</span><span class=code-def>true</span><span class=code-punctuation>"</span>`, "用户选择")}
                    <br />
                    ${tagContent("user-selector", `
                        <span class=code-attr-name>:open</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>userOpen</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>:values</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>users</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"userRef"</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>`)
                    }
                    `)}
                    <span class=code-tag>&lt;&#47;div></span>`
            )}
                    <br />
                    ${scriptBox(
                "users:[],<br />userOpen:false",
                `
                            ${addVEvtLis('userRef', 'select', 'userSelect')}
                            <br />
                            ${addVEvtLis('userRef', 'close', 'userClose')}
                        `,
                `
                            ${vfnBox('userSelect', `
                            <span class=code-keyword>const</span>
                            ids
                            <span class=code-punctuation>=</span>
                            val.detail.${returnVAttr("map", `item.id`)}
                            <br />
                            <span class=code-this>this</span>.users
                            =
                            ids
                            <br />
                            <span class=code-this>this</span>.userOpen
                            =
                            false
                            `, 'val')}
                            <br />
                            ${vfnBox('userClose', `
                            <span class=code-this>this</span>.userOpen
                            =
                            false
                            `)}
                        `
            )}
            `,
            vueCode: `
                <template>
                    <div>
                        <button @click="userOpen=true">用户选择</button>
                        <user-selector :open="userOpen" :values="users" ref="userRef" titles="用户选择"></user-selector>
                    </div>
                </template>
                <script>
                export default {
                    data() {
                        return {
                            users: [],
                            userOpen: false
                        }
                    },
                    mounted() {
                        this.$refs.userRef.addEventListener('select', this.userSelect.bind(this))
                        this.$refs.userRef.addEventListener('close', this.userClose.bind(this))
                    },
                    methods: {
                        userSelect(val) {
                            const ids = val.detail.map(item => item.id)
                            this.users = ids
                            this.userOpen = false
                        },
                        userClose() {
                            this.userOpen = false
                        },
                    }
                }
                </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    userRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('users', 'setUsers', '&lt;string[]', '[]'))}
                ${textIndent(userState('userOpen', 'setUserOpen', '&lt;boolean', 'false'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    userRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${addEvtLis('userRef', 'select', 'userSelect')}
                            <br />
                            ${addEvtLis('userRef', 'close', 'userClose')}
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                ${returnFn(`
                ${textIndent(`
                        ${removeEvtLis('userRef', 'select', 'userSelect')}
                        <br />
                        ${removeEvtLis('userRef', 'close', 'userClose')}
                    `)
                    }
                `)}
                `)))}
                ${textIndent(`
                    ${fnBox("userSelect", "val", `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    val.detail.${returnAttr("map", `item.id`)}
                    <br />
                    <span class=code-keyword>setUsers</span><span class=code-punctuation>(</span>ids<span class=code-punctuation>)</span>
                    <br />
                    <span class=code-keyword>setUserOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>
                `)}
                <br />
                ${fnBox("userClose", "", `
                    <span class=code-keyword>setUserOpen</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>
                `)
                        }
                `)}
                ${textIndent(returnCustomContent(`
                    ${tagContent('button', `
                    <span class=code-attr-name>onClick</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span class=code-punctuation>()</span>
                    <span class=code-punctuation>=></span>
                    <span class=code-keyword>setUserOpen</span><span class=code-punctuation>(</span><span class=code-def>true</span><span class=code-punctuation>)</span>
                    </span><span class=code-punctuation>}</span>`, "用户选择")}
                    <br />
                    ${tagContent("user-selector", `
                        <span class=code-attr-name>open</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>userOpen</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>values</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>users</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>userRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>`)}
                `))}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
                import { FC, useRef, useEffect, useState } from 'react';
                const App: FC = () => {
                const userRef = useRef<any>()
                const [users, setUsers] = useState<string[]>([])
                const [userOpen, setUserOpen] = useState<boolean>(false)
                useEffect(() => {
                    if (userRef.current) {
                        userRef.current?.addEventListener('select', userSelect)
                        userRef.current?.addEventListener('close', userClose)
                    }
                    return () => {
                        userRef.current?.removeEventListener('select', userSelect)
                        userRef.current?.removeEventListener('close', userClose)
                    };
                });
                function userSelect(val: any) {
                    const ids = val.detail.map((item: any) => item.id)
                    setUsers(ids)
                    setUserOpen(false)
                }
                function userClose() {
                    setUserOpen(false)
                }
                return (
                    <>
                        <button onClick={() => setUserOpen(true)}>用户选择</button>
                        <user-selector open={userOpen} values={users} ref={userRef} titles="用户选择"></user-selector>
                    </>
                )
                };
            `,
        },
        {
            title: 'Single choice mode',
            introduction: "By default, it is double checked. If the value of 'multiple' is passed in, it will be changed to single choice mode",
            attention: "Attention：In both single choice and double choice modes, the value returned by the select event is an array。",//用法提示
            imgs: [
                {
                    title: "Selection box",
                    url: '1.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
                {
                    url: '4.png',
                    width: "100px",
                    height: "100px",
                    isOpen: true
                }
            ],
            btnList: [],
            vueHTML: `
                ${templateBox(tagContent("user-selector", `
                    <span class=code-attr-name>:multiple</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>false</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>:values</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>users</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"userRef"</span>
                    <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>placeholder</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>请选择...</span><span class=code-punctuation>"</span>`))}
                <br />
                ${scriptBox(
                "users:[]",
                addVEvtLis('userRef', 'select', 'userSelect'),
                vfnBox('userSelect', `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    val.detail.${returnVAttr("map", `item.id`)}
                    <br />
                    <span class=code-this>this</span>.users
                    =
                    ids
                    `, 'val')
            )}
            `,
            vueCode: `
                <template>
                    <user-selector :multiple="false" :values="users" ref="userRef" titles="用户选择" placeholder="请选择..."></user-selector>
                </template>
                <script>
                export default {
                    data() {
                        return {
                            users: []
                        }
                    },
                    mounted() {
                        this.$refs.userRef.addEventListener('select', this.userSelect.bind(this))
                    },
                    methods: {
                        userSelect(val) {
                            const ids = val.detail.map(item => item.id)
                            this.users = ids
                        }
                    }
                }
                </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    userRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('users', 'setUsers', '&lt;string[]', '[]'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    userRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${addEvtLis('userRef', 'select', 'userSelect')}
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                ${returnFn(`
                ${textIndent(`
                        ${removeEvtLis('userRef', 'select', 'userSelect')}
                    `)
                    }
                `)}
                `)))}
                ${textIndent(fnBox("userSelect", "val", `
                    <span class=code-keyword>const</span>
                    ids
                    <span class=code-punctuation>=</span>
                    val.detail.${returnAttr("map", `item.id`)}
                    <br />
                    <span class=code-keyword>setUsers</span><span class=code-punctuation>(</span>ids<span class=code-punctuation>)</span>
                `))}
                ${textIndent(
                        returnTagContent("user-selector", `
                        <span class=code-attr-name>multiple</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>false</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>values</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>users</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>userRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>titles</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>用户选择</span><span class=code-punctuation>"</span>
                        <span class=code-attr-name>placeholder</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>请选择...</span><span class=code-punctuation>"</span>`)
                    )}
                <span class=code-punctuation>};</span>
            `,//代码展示的HTML
            reactCode: `
                import { FC,useRef,useEffect,useState } from 'react';
                const App: FC = () => {
                    const userRef = useRef<any>()
                    const [ users, setUsers ] = useState<string[]>([])
                    useEffect(() => {
                        if ( userRef.current ) {
                            userRef.current?.addEventListener('select', userSelect)
                        }
                        return () => {
                            userRef.current?.removeEventListener('select', userSelect)
                        };
                    });
                    function userSelect(val:any) {
                        const ids = val.detail.map((item:any) => item.id)
                        setUsers(ids)
                    }
                    return <user-selector multiple={false} values={users} ref={userRef} titles="用户选择" placeholder="请选择..." ></user-selector>
                };
            `,//复制的代码
        },
        {
            title: 'Ant Design form',//标题
            introduction: "Used in the form component of Ant Design, there is no need to pass values or listen for select events. The selected values can be obtained through the form instance of the form",//简介
            attention: "Attention：The name attribute of Form.item and the field attribute of the component are both mandatory。",//用法提示
            hiddenCode: ["vue"],//需要隐藏的代码模块
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    title: "select",
                    url: '1.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
                {
                    url: '2.png',
                    width: "100px",
                    height: "100px",
                    isOpen: true
                }
            ],
            btnList: [],
            reactHTML: `
                ${importReact("FC,useRef,useEffect,useState")}
                ${importReact("Form", "antd")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    userRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(formsState('forms'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    userRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                        userRef.current.form = forms
                        `)
                }
                <span class=code-punctuation>}</span>
                <br />
                `)))}
                
                    ${textIndent(returnCustomContent(`
                    ${tagContent("Form", `
                        <span class=code-attr-name>form</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>forms</span><span class=code-punctuation>}</span>`,
                    `<br />${textIndent(`
                            ${tagContent("Form.Item", `
                            <span class=code-attr-name>name</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-def>userName</span><span class=code-punctuation>"</span>`, `
                            <br />${textIndent(tagContent("user-selector", `
                            <span class=code-attr-name>field</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-def>userName</span><span class=code-punctuation>"</span>
                            <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-def>userRef</span><span class=code-punctuation>"</span>
                            `


                    ))}`)}
                            `)}
                            `
                )}
                `))}
                <span class=code-punctuation>};</span>
            `,//代码展示的HTML
            reactCode: `
            import { FC, useRef, useEffect } from 'react';
            import { Form } from 'antd';
            const App: FC = () => {
                const userRef = useRef<any>()
                const [forms] = Form.useForm()
                useEffect(() => {
                    if (userRef.current) {
                        userRef.current.form = forms
                    }
                }, []);
                return (
                    <>
                    <Form form={forms}>
                        <Form.Item name="userName">
                        <user-selector field="userName" ref="userRef" ></user-selector>
                        </Form.Item>
                    </Form>
                    </>
                )
            };
            `,//复制的代码
        },
    ],
    APIList: [
        {
            field: "placeholder",
            remark: "Selection box placeholder",
            type: "string",
            default: ""
        },
        {
            field: "styles",
            remark: "Selection box style,for example：color:red;font-size:16px",
            type: "string",
            default: "width:183px"
        },
        {
            field: "titles",
            remark: "Pop up title",
            type: "string",
            default: "用户选择"
        },
        {
            field: "treetype",
            remark: "The tree display type on the left side of the pop-up box currently supports org organizational structure and role role list",
            type: "string",
            default: "org"
        },
        {
            field: "orgid",
            remark: "The tree on the left side of the pop-up box defaults to the selected organizational unit ID. When only one ID is passed in, the tree will not be displayed and only the current unit data will be queried. Streettype must be org to take effect",
            type: "string | string[ ]",
            default: ""
        },
        {
            field: "orgtype",
            remark: "The organizational unit types displayed in the tree on the left side of the pop-up box, such as owner units and supervisory units. Streettype must be org to take effect",
            type: "string | string[ ]",
            default: ""
        },
        {
            field: "roleid",
            remark: "The tree on the left side of the pop-up box defaults to the selected role ID. When only one ID is passed in, the tree is not displayed and only the current role data is queried. Streettype must be set to role for it to take effect",
            type: "string | string[ ]",
            default: ""
        },
        {
            field: "multiple",
            remark: "Does the user select multiple options",
            type: "boolean",
            default: "true"
        },
        {
            field: "idkey",
            remark: "User pagination rendering and key selection, now supports ID, username",
            type: "string",
            default: "id"
        },
        {
            field: "values",
            remark: "Select user key and judge based on idkey",
            type: "string | string[ ]",
            default: ""
        },
        {
            field: "selecttips",
            remark: "Prompt text for selecting trees",
            type: "string",
            default: "选择组织机构"
        },
        {
            field: "open",
            remark: "External control user popup, no longer displaying selection box",
            type: "boolean",
            default: ""
        },
    ],
    otherList: [//其他
        {
            title: "Event",
            titleText: ["We need to bind the element's ref and use addEventListener to listen for events。"],
            header: ["Event Name", "explain"],
            list: [
                {
                    name: "select",
                    remark: "user-selector Submit button click event",
                },
                {
                    name: "close",
                    remark: "user-selector close Event",
                },
            ]

        }
    ]
}